<!--
 * @Description: 单位服务记录-添加/修改订单弹出框 
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->


<template>
    
    <el-dialog class="modifyDialog" :close-on-click-modal="false" :visible="isShow" :title="title" @close="closeDialog" :width="'1000px'">

        <div class="modifyContent">
            <el-row>
                <el-col :span="8">
                    <div class="leftContent">
                        <el-form :model="unitData" status-icon :rules="rules" ref="modifyForm" v-model="unitData" label-position="left" label-width="100px" size="mini" >
                            
                            <div class="title">单位信息：</div>
                            <el-divider></el-divider>

                            <el-form-item label="单位名称：" prop="unitName" >
                                <el-input v-model="unitData.unitName" clearable disabled >
                                    <app-icon slot="suffix" 
                                    v-if="isCreate=='create'"
                                    class="cursor-pointer selectTanantBtn" 
                                    iconName="vcloud-Unitmanagement" @click="selectTenant"></app-icon>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="单位ID：" prop="unitId" class="bottom0">
                                <el-input type="text" v-model="unitData.unitId" clearable disabled></el-input>
                            </el-form-item>
                            <el-form-item label="单位产品名称：" prop="unitProductName" class="bottom0">
                                <el-input type="text" v-model="unitData.unitProductName" clearable disabled></el-input>
                                <!-- <el-select v-model="unitData.unitProductName" placeholder="请选择" disabled>
                                    <el-option v-for="(item,index) in unitProductNameOptions" 
                                    :key="index" :label="item.unitProductName" :value="item.unitProductCode"></el-option>
                                </el-select> -->
                            </el-form-item>
                            <el-form-item label="单位产品编号：" prop="unitProductCode" class="bottom0">
                                <el-input type="text" v-model="unitData.unitProductCode" clearable disabled></el-input>
                            </el-form-item>
                            
                            <br>
                            <div class="title">订单信息：</div>
                            <el-divider></el-divider>

                            <el-form-item label="订单编号：" prop="orderSn">
                                <el-input oninput="if(value.length>20)value=value.slice(0,20)" maxlength="20"
                                    onkeyup="this.value=this.value.replace(/[^\d-]/g,'')"
                                    v-model="unitData.orderSn" clearable :disabled="isCreate=='detail'||isCreate=='modify'" ></el-input>
                            </el-form-item>
                            <el-form-item label="下单时间：" prop="orderTimeTemp">
                                <el-date-picker size="mini" :disabled="isCreate=='detail'||isCreate=='modify'"
                                    v-model="unitData.orderTimeTemp" format="yyyy-MM-dd HH-mm" 
                                    value-format="timestamp" type="datetime" clearable>
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="订单类型：" class="bottom0">
                                <!-- <el-input v-if="unitData.orderType==1" type="text" value="新购" clearable ></el-input>
                                <el-input v-else-if="unitData.orderType==2" type="text" value="增购" clearable ></el-input> -->
                                <el-select v-model="unitData.orderType" placeholder="请选择" :disabled="isCreate!='create'">
                                    <el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="rightContent">
                        <div class="title">订单内容</div>
                        <el-form label-position="left" label-width="100px">
                            <div v-show="!hasProductData">
                                <el-form-item label="产品：">
                                    <el-input size="mini" v-model="productContent.productName" style="width:150px;" disabled ></el-input>
                                    <div style="display:inline-block;" v-if="isCreate=='create'||isCreate=='modify'">
                                        <span :class="['cursor-pointer select_text',{disabled:isShopping}]" @click="selectProduct">选择</span>
                                        <span :class="['cursor-pointer delete_text',{disabled:isShopping}]" @click="removeProduct">删除</span>
                                    </div>
                                </el-form-item>
                                <!-- 产品包表格 -->
                                <div class="productInfoTable" >
                                    <el-table
                                        border
                                        :height="200"
                                        :data="productTable.tableData"
                                        @selection-change="getProductCurrentRow">
                                        <el-table-column
                                            v-for='col in productTable.headData'
                                            :width="columnWidth(col)"
                                            :fixed="col.title=='operation' ? 'right':false"
                                            :show-overflow-tooltip=" true "
                                            :prop="col.title"
                                            :label="col.text"
                                            :key="col.title">
                                            <template slot-scope="scope">
                                                <!-- 服务方式 -->
                                                <div v-if="col.title == 'serviceMode' ">
                                                    <div v-if="scope.row[col.title].type">
                                                        <p v-if="scope.row[col.title].type=='1'">数量</p>
                                                        <p v-else-if="scope.row[col.title].type=='2'">时长</p>
                                                        <p v-else-if="scope.row[col.title].type=='3'">数量+时长</p>
                                                    </div>
                                                </div>
                                                <!-- 服务类型 -->
                                                <div v-else-if="col.title == 'serviceType'">
                                                    <p v-if="scope.row[col.title]==0">标准产品</p>
                                                    <p v-if="scope.row[col.title]==1">平台服务</p>
                                                    <p v-if="scope.row[col.title]==2">业务包</p>
                                                    <p v-if="scope.row[col.title]==3">第三方服务</p>
                                                    <p v-if="scope.row[col.title]==4">插件</p>
                                                </div>
                                                <!-- 服务内容 -->
                                                <span v-else-if="col.title == 'serviceContent'">
                                                    <span v-html="scope.row[col.title]"></span>
                                                </span>
                                                <!-- 服务状态 -->
                                                <div v-else-if="col.title == 'serviceStatus' ">
                                                    <p v-if="scope.row[col.title]=='0'">未生效</p>
                                                    <p v-if="scope.row[col.title]=='1'">生效中</p>
                                                    <p v-if="scope.row[col.title]=='2'">待生效</p>
                                                    <p v-if="scope.row[col.title]=='3'">失效</p>
                                                </div>
                                                <!-- 服务内容 -->
                                                <!-- <div v-else-if="col.title == 'serviceContent' ">
                                                    <span>{{ scope.row[col.title] }}</span>
                                                    <p v-if="scope.row[col.title].count">数量：{{ scope.row[col.title].count }}个</p>
                                                    <p v-if="scope.row[col.title].time">时长：{{ scope.row[col.title].time }}个月</p>
                                                </div> -->
                                                <!-- 操作 -->
                                                <div v-else-if="col.title == 'operation' ">
                                                    <!-- 配置产品服务 -->
                                                    <div v-if="isCreate=='config'" >
                                                        <p :class="['viewDetail cursor-pointer',{modify:scope.row.modify}]" 
                                                            @click="configParamsBtn(scope.$index, scope.row)">配置参数</p>
                                                        <p :class="['viewDetail cursor-pointer',{modify:scope.row.modify}]" 
                                                            @click="setTakeTimeBtn(scope.$index, scope.row)">设置生效时间</p>
                                                    </div>
                                                    <!-- 服务设置 -->
                                                    <div v-if="isCreate=='create'||isCreate=='modify'" :class="['viewDetail cursor-pointer',{modify:scope.row.modify}]" 
                                                        @click="setServiceBtn(scope.$index, scope.row)">服务设置</div>
                                                </div>
                                                <span v-else>
                                                    <!-- <i class="el-icon-time"></i> -->
                                                    <span>{{ scope.row[col.title] }}</span>
                                                </span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            
                            <el-form-item label="添加服务：">
                                <div v-if="isCreate=='create'||isCreate=='modify'">
                                    <el-button type="primary" size="mini" @click="addService">
                                        <app-icon iconName="vcloud-btn-add"></app-icon>
                                        添 加
                                    </el-button>
                                    <!-- :disabled="removeServiceBtn" -->
                                    <el-button size="mini"  @click="removeService">
                                        <app-icon iconName="vcloud-shanchu"></app-icon>
                                        删 除
                                    </el-button>
                                </div>
                            </el-form-item>
                            <!-- 服务列表表格 -->
                            <!-- :row-class-name="setRowClassName" -->
                            <div class="serviceTable disabledCheckbox">
                                <el-table
                                    border
                                    ref="serviceTable"
                                    :height="!hasProductData?200:270"
                                    :data="serviceTable.tableData"
                                    @selection-change="getCurrentRow"
                                    @select=" ( selection , row ) => selectRowProduct(row)"
                                    @row-click="selectRowProduct"
                                    >
                                    <el-table-column v-if="isCreate=='create'||isCreate=='modify'"
                                        type="selection" label="序号" width="50">
                                    </el-table-column>

                                    <el-table-column
                                        v-for='col in serviceTable.headData'
                                        :width="columnWidth(col)"
                                        :fixed="col.title=='operation' ? 'right':false"
                                        :show-overflow-tooltip=" true "
                                        :prop="col.title"
                                        :label="col.text"
                                        :key="col.title">
                                        <template slot-scope="scope">
                                            <!-- 服务方式 -->
                                            <div v-if="col.title == 'serviceMode' ">
                                                <div v-if="scope.row[col.title].type">
                                                    <p v-if="scope.row[col.title].type=='1'">数量</p>
                                                    <p v-else-if="scope.row[col.title].type=='2'">时长</p>
                                                    <p v-else-if="scope.row[col.title].type=='3'">数量+时长</p>
                                                </div>
                                            </div>
                                            <!-- 服务类型 -->
                                            <div v-else-if="col.title == 'serviceType'">
                                                <p v-if="scope.row[col.title]==0">标准产品</p>
                                                <p v-if="scope.row[col.title]==1">平台服务</p>
                                                <p v-if="scope.row[col.title]==2">业务包</p>
                                                <p v-if="scope.row[col.title]==3">第三方服务</p>
                                                <p v-if="scope.row[col.title]==4">插件</p>
                                            </div>
                                            <!-- 服务内容 -->
                                            <span v-else-if="col.title == 'serviceContent'">
                                                <span v-html="scope.row[col.title]"></span>
                                            </span>
                                            <!-- 服务状态 -->
                                            <div v-else-if="col.title == 'serviceStatus' ">
                                                <p v-if="scope.row[col.title]=='0'">未生效</p>
                                                <p v-if="scope.row[col.title]=='1'">生效中</p>
                                                <p v-if="scope.row[col.title]=='2'">待生效</p>
                                                <p v-if="scope.row[col.title]=='3'">失效</p>
                                            </div>
                                            <!-- 服务内容 -->
                                            <!-- <div v-else-if="col.title == 'serviceContent' ">
                                                <span>{{ scope.row[col.title] }}</span>
                                                <p v-if="scope.row[col.title].count">数量：{{ scope.row[col.title].count }}个</p>
                                                <p v-if="scope.row[col.title].time">时长：{{ scope.row[col.title].time }}个月</p>
                                            </div> -->
                                            <!-- 操作 -->
                                            <div v-else-if="col.title == 'operation' ">
                                                <!-- 配置产品服务 -->
                                                <div v-if="isCreate=='config'" >
                                                    <p :class="['viewDetail cursor-pointer',{modify:scope.row.modify}]" 
                                                        @click="configParamsBtn(scope.$index, scope.row)">配置参数</p>
                                                    <p :class="['viewDetail cursor-pointer',{modify:scope.row.modify}]" 
                                                        @click="setTakeTimeBtn(scope.$index, scope.row)">设置生效时间</p>
                                                </div>
                                                <!-- 服务设置 -->
                                                <!-- ,{modify:scope.row.modify} -->
                                                <div v-if="isCreate=='create'||isCreate=='modify'" :class="['viewDetail cursor-pointer']"
                                                    @click="setServiceBtn(scope.$index, scope.row)">服务设置</div>
                                            </div>
                                            <span v-else>
                                                <!-- <i class="el-icon-time"></i> -->
                                                <span>{{ scope.row[col.title] }}</span>
                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <button class="el-button el-button--primary" @click="submit">确 定</button>
            <button class="el-button el-button--info" @click="closeDialog">取 消</button>
        </div>
        <!-- 选择单位/产品弹出框 -->
        <SearchDialog ref="searchDialog" @searchDialog_submit="searchDialog_submit"></SearchDialog>
        <!-- 设置服务倍数弹出框 -->
        <ServiceSettingDialog ref="serviceSettingDialog" @serviceSettingCallback="serviceSettingCallback"></ServiceSettingDialog>
        <!-- 添加服务穿梭弹出框 -->
        <TransferDialog ref="transferDialog" 
            @getSelectData="transferDialog_getSelectData" 
            @submit="transferDialog_submit"
            @removeData="transferDialog_remove"
        ></TransferDialog> 
        

    </el-dialog>

    
</template>

<script>
import TransferDialog from "@/components/transferDialog.vue";//添加服务穿梭弹出框
import ServiceSettingDialog from "./serviceSettingDialog.vue";//设置服务倍数弹出框
import SearchDialog from "./searchDialog.vue";//选择单位/产品弹出框
// import {myBrowser} from "@/utils/tool";
export default{

    name:"modify-dialog",
    components:{
        TransferDialog,
        ServiceSettingDialog,
        SearchDialog,
    },
    props:{
        
    },
    data:() =>({
        // myBrowser:myBrowser(),
        title:"",
        isShow:false,
        isCreate:false,
        unitProductCode:"",//单独记录下单位产品编号
        mainProductId:"",//主产品ID
        isShopping:false,//记录是否是增购和新购，true:增购：有订单数据就是增购 false:新购：没有订单数据就是新购。默认没有。
        removeServiceBtn:false,//附加服务的数据是否是当前新加的数据，是当前新加的数据，才能执行删除操作
        hasProductData:false,//是否有产品包数据
        //数据校验
        rules:{
            unitName:[{ required: true, message: ' ', trigger: 'blur' } ],
            orderTimeTemp:[{ required: true, message: ' ', trigger: 'blur' } ],
            // unitProductCode:[],
            // unitProductName:[],
            orderSn:[ { required: true, message: ' ', trigger: 'blur' } ],
            orderTime:[ {  required: true, message: ' ', trigger: 'change' }],
        },
        //传入的列表数据
        unitData:{
            unitName:"", //单位名称
            unitId:"",   //单位ID
            unitProductCode:"", //单位产品编号
            unitProductName:"", //单位产品名称
            orderSn:"", //订单编号
            orderType:"1", //订单类型
            orderTime:"", //下单时间
        },
        // 单位产品名称列表数据
        unitProductNameOptions:[
            // {
            //     value:"1",
            //     label:"产品1"
            // }
        ],
        // 订单类型列表数据
        orderTypeOptions:[
            {
                value:"1",
                label:"正式"
            },{
                value:"2",
                label:"试用"
            }
        ],
        productContent:{ //产品信息
            productName:""
        },
        //产品明细表-主产品
        productTable:{
            currentRow:"",//当前行数据
            headData:[
                {
                    title:"typeDescription",
                    text:"服务类型"
                },{
                    title:"serviceName",
                    text:"服务名称"
                },
                {
                    title:"mallId",
                    text:"商品ID"
                },
                {
                    title:"serviceMode", //服务方式======
                    text:"服务方式"
                },
                {
                    title:"serviceContent",
                    text:"服务内容"
                },{
                    title:"serviceContent",
                    text:"状态"
                },{
                    title:"beginDate",
                    text:"生效时间"
                },{
                    title:"expireDate",
                    text:"失效时间"
                },{
                    title:"operation",
                    text:"操作"
                }
            ],
            tableData:[]
        },
        //附加购买服务表格数据-子产品
        serviceTable:{
            markRowSelect:{},//记录单选
            currentRow:"",//当前行数据
            headData:[
                {
                    title:"typeDescription",
                    text:"服务类型"
                },{
                    title:"serviceName",
                    text:"服务名称"
                },
                {
                    title:"mallId",
                    text:"商品ID"
                },
                {
                    title:"serviceMode", //服务方式======
                    text:"服务方式"
                },
                {
                    title:"serviceContent",
                    text:"服务内容"
                },{
                    title:"serviceContent",
                    text:"状态"
                },{
                    title:"beginDate",
                    text:"生效时间"
                },{
                    title:"expireDate",
                    text:"失效时间"
                },{
                    title:"operation",
                    text:"操作"
                }
            ],
            tableData:[
                // {
                //     "typeDescription":"",
                //     "serviceName":"固定资产管理",
                //     "serviceMode":{
                //         count:"1000",time:24
                //     },
                //     "serviceContent":{
                //         count:"1000",time:24
                //     },
                //     "operation":""
                // }
            ]
        },
        //穿梭框参数
        transferParams:{
            selectOptions:[],
            // [{
            //     label: '一级',
            //     value:"对应值",
            //     children: [{
            //         label: '一级下的第一级1-1',
            //         value:"对应值",
            //         children:[] //链，没有就不传
            //     }]
            // }]
            leftList:[]
            //[{
            //    id:"11",
            //    label:"插件1",
            //    checked:false //是否选中状态
            //}]
        }
    }),
    created(){},
    mounted(){},
    methods:{

        open(data){
            this.isShow = true;
            
            // let configData = Object.assign({},data);
            let configData = JSON.parse(JSON.stringify(data));
            this.title = configData.title;
            let isCreate = configData.isCreate;
            this.isCreate = isCreate;
            this.unitData = configData.unitData;
            this.tableHeadFormat(isCreate);
            this.unitProductCode = this.unitData.unitProductCode;
            let orderTime = this.unitData.orderTime;
            if(orderTime){
                let formatTime = new Date(orderTime).getTime();
                this.unitData.orderTime = formatTime;
                // this.unitData.orderTime = orderTime ? this.formatTime(orderTime):"";
            }
            this.getOrderDetail();
        },

        // 选择单位按钮
        selectTenant(){
            let data={
                tenant:true,
            }
            this.$refs.searchDialog.open(data);
        },
        // 选择产品按钮
        selectProduct(){
            if(this.isShopping)return; //如果是增购，不能选择主产品
            let data={
                tenant:false,
            }
            this.$refs.searchDialog.open(data);
        },
        //监听选择单位/选择产品弹出框回调
        searchDialog_submit(data){
            
            if(data.type=="tenant"){ //选中单位回调----------
                let currentRow = data.currentRow;
                if(!currentRow)return;
                this.unitProductCode = currentRow.unitProductCode;
                let tenantGroup = {
                    tenantId:currentRow.id,//单位ID(缓存在这个对象里，实际并没有渲染)
                    unitProductType:currentRow.unitProductType,//单位产品类型(缓存在这个对象里,实际没有渲染)
                    unitName:currentRow.unitName, //单位名称
                    unitId:currentRow.unitId,   //单位ID
                    unitProductCode:currentRow.unitProductCode, //单位产品编号
                    unitProductName:currentRow.unitProductName, //单位产品名称
                    unitOrgCode:currentRow.unitOrgCode,//单位产品码
                    corpId:data.currentRow.corpId,
                };
                this.unitData = Object.assign(this.unitData,tenantGroup);
                // 填充单位产品名称列表
                // this.unitProductNameOptions = [
                //    ...data.currentRow.listData
                // ];
                this.getOrderDetail();
            }else{ //选中主产品后的回调----------返回主产品和子产品
                let productPackageId = data.currentRow.productPackageId; //主产品ID,根据主产品获取产品包
                this.mainProductId = productPackageId;
                this.api.productDetailOrder({
                    id:productPackageId
                }).then( res =>{
                    console.log(res);
                    let data = res.data;
                    if(!data || !( data instanceof Object) )return;
                    let listData = data.products;
                    let mainProduct = data.mainProduct;
                    let arrayData = [];
                    if(mainProduct){
                        this.productContent.productName = mainProduct.name;
                    }
                    listData.forEach( item =>{
                        let parameter = item.parameter;
                        let obj = {
                            serviceType:item.type?item.type:"0",
                            serviceName:item.name,
                            mallId:item.mallId||"", //商品ID
                            // serviceMode:"",
                            // serviceContent:"",
                            ...this.tableDataFormat(item)
                        }
                        arrayData.push(obj);
                    });
                    this.productTable.tableData=arrayData; //产品明细表
                }).catch( err =>{
                    console.log(err);
                });
                
            }
            
        },
        // 获取订单总数据
        getOrderDetail(){
            if(!this.unitProductCode)return;//修改的时候才会走查询接口
            let resetData = () =>{ //重置一下数据
                // this.unitData.unitId = "";
                this.hasProductData = false;
                this.productContent.productName = "";
                this.isShopping = false;
                this.mainProductId = "";
                this.productTable.tableData = [];
                this.serviceTable.tableData = [];
            }
            this.api[this.isCreate=='detail'?'orderDetail':'orderDetailEdit']({
                code:this.unitProductCode
            }).then( res =>{
                console.log(res);
                let listData = res.data;
                resetData();
                if(!listData || !(listData instanceof Object) )return;
                this.unitData.unitId = listData.unitId;//单位ID
                this.mainProductId = listData.mainProductId; //主产品ID
                this.isShopping = true;//有订单数据，那就是增购,没有订单数据那就是新购。
                this.productContent.productName = listData.mainProductName;//主产品名称
                let products = listData.products;//产品包表
                let additionalProducts = listData.additionalProducts;//附加服务表
                //产品明细表:
                if(products){
                    products.forEach( item =>{
                        if(this.unitData.orderSn == item.orderSn ){ //只加载当前订单所绑定的服务表数据
                            let parameter = item.parameter;
                            let product = item.product;
                            let obj = {
                                serviceType:product.type?product.type:"0",
                                serviceName:product.name,
                                mallId:item.mallId||"", //商品ID
                                serviceStatus:item.status,
                                beginDate:this.formatTime(item.beginDate),  //生效时间
                                expireDate:this.formatTime(item.expireDate), //失效时间
                                // serviceMode:"",
                                // serviceContent:"",
                                ...this.tableDataFormat(item)
                            };
                            this.productTable.tableData.push(obj);
                        }
                    });
                    // if(this.productTable.tableData.length == 0 ){
                        this.hasProductData = this.productTable.tableData.length == 0 ? true : false;
                    // }
                }
                //有产品包数据，便隐藏产品整个容器
                if(this.isCreate == 'create'){
                    products && products.length>0 && (this.hasProductData = true); 
                }
                // 附加服务表：
                additionalProducts.forEach( item =>{
                    if(this.unitData.orderSn == item.orderSn ){ //只加载当前订单所绑定的服务表数据
                        let parameter = item.parameter;
                        let product = item.product;
                        let obj = {
                            modify:true,
                            id:product.id,
                            orderProductId:item.orderProductId,
                            serviceType:product.type?product.type:"0",
                            serviceName:product.name,
                            mallId:item.mallId||"", //商品ID
                            serviceStatus:item.status,
                            beginDate:this.formatTime(item.beginDate),  //生效时间
                            expireDate:this.formatTime(item.expireDate), //失效时间
                            // serviceMode:"",
                            // serviceContent:"",
                            ...this.tableDataFormat(item)
                        };
                        this.serviceTable.tableData.push(obj);
                    }
                    
                });
            }).catch( err =>{
                console.log(err);
                resetData();

            });
        },
        // 删除产品按钮-产品包
        removeProduct(){
            if(this.isShopping)return;
            this.productContent.productName = ""; //当前产品包
            this.productTable.tableData = []; //产品包明细表
            this.mainProductId = "";//主产品ID
        },



        //添加服务按钮
        addService(){
            if(!this.unitProductCode){
                this.$alert("请先选择单位信息!");
                return;
            }
            if(!this.mainProductId){
                this.$alert("请先选择产品信息!");
                return;
            }
            this.getTransferData();
        },

        //穿梭框事件集------------------start---------

        // 获取穿梭框数据
        getTransferData(){
            
            this.api.getCategoryType({},{method:"get",customRequest:true})
            .then( res =>{
                console.log(res);
                if(!res.data)return;
                let data = res.data || [];
                this.transferParams.selectOptions = data;
                let params = {
                    title:"选择服务",
                    selectId:"",
                    selectTitle:"",
                    defaultProps:{ //指定节点的对应
                        label: "description",
                        value: "key",
                        children: "children"
                    },
                    selectOptions: this.transferParams.selectOptions,  
                    leftList:this.transferParams.leftList,
                };
                let defaultCat1 = data[0];
                let defaultCat2 = defaultCat1;
                if (defaultCat2) {
                    params.selectId = defaultCat2.key;
                    params.selectTitle = defaultCat2.description;
                    this.getPluginListByCategoryId(defaultCat2.key);
                }
                this.$nextTick( ()=>{
                    this.$refs.transferDialog.open(params);
                });
            }).catch( err =>{

            });
        },
        //选择完下拉数据后的回调
        transferDialog_getSelectData(key){
            this.getPluginListByCategoryId(key);
        },
        // 根据分类Id 获取可选服务
        getPluginListByCategoryId(key) {
            this.api.getProductBasicInfosByType(
                    { params: {type: key} },
                    { method: "get", customRequest: true }
                ).then(res => {
                    let data = res.data || [];
                    // if(!data || data.length==0)return;
                    this.serviceTable.tableData && this.serviceTable.tableData.forEach( cell=>{
                        data = data.filter( item => item.service_name!==cell.serviceName);
                    } );
                    data.forEach(item => {
                        item.checked = false;
                        item.label = item.service_name;
                    });
                    
                    this.$refs.transferDialog.refreshData({leftList:data});
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //监听添加服务穿梭框确定按钮回调
        transferDialog_submit(data){
            if(!data || data.length==0)return;
            console.log(data);
            let ids = [];
            data.forEach( item =>{
                let obj = {
                    dependId:item.id
                }
                ids.push(obj);
            });
            this.api.addChildService({
                unitProductCode:this.unitProductCode,
                productInfos:ids
            }).then( res =>{
                console.log(res);
                let listData = res.data;
                if(!listData)return;
                let arrayData = [];
                listData.forEach( (item,index) =>{
                    this.serviceTable.tableData && this.serviceTable.tableData.forEach( cell=>{
                        listData = listData.filter( item => cell.id !== item.id);
                    });
                }); 
                listData.forEach( item =>{
                    //附加购买服务表格数据:
                    let obj = {
                        modify:false,
                        id:item.id,
                        orderProductId:item.id,
                        serviceType:item.type?item.type:"0",
                        serviceName:item.name,
                        mallId:item.mallId||"", //商品ID
                        // serviceMode:"",
                        // serviceContent:"",
                        ...this.tableDataFormat(item),
                        operation:""
                    }
                    this.serviceTable.tableData.push(obj);
                }); 
                
            }).catch( err =>{
                console.log(err);

            });
        },
        //监听穿梭框删除事件
        transferDialog_remove(data){
            //data:rightList
            let id = data.id;
            this.getPluginListByCategoryId(id);//重新获取可选服务数据
        },
        //穿梭框事件集------------------end---------

        //删除服务按钮-
        removeService(){
            let currentRow = this.serviceTable.currentRow;
            // if(!currentRow || currentRow.modify)return;
            if(!currentRow || currentRow.length == 0 ){
                this.$message("未选择任何数据！");
                return;
            }
            console.log(currentRow);
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = [currentRow.orderProductId];
                // currentRow.forEach( item =>{
                //     ids.push(item.id);
                // });
                this.api.deleteChildService({
                    unitProductCode:this.unitProductCode, //单位产品编号
                    productIds:ids, //子产品数组
                    exits: currentRow.modify?"1":"0", //原数据为1，新添加的服务为0
                },{loading:true}).then(res =>{
                    console.log(res);
                    this.serviceTable.tableData.forEach( (item,index) =>{
                        if(item.id == currentRow.id ){
                            this.serviceTable.tableData.splice(index,1);
                        }
                    });
                }).catch( err =>{
                    console.log(err);

                });
            });
        },
        //服务设置按钮
        setServiceBtn(index, row){
            // if(row.modify)return;
            let data = {
                mainProductId:this.mainProductId,
                row:row,
                unitProductCode:this.unitProductCode
            }
            data.row.currentIndex = index;
            this.$refs.serviceSettingDialog.open(data);
        },
        //监听设置服务倍数回调
        serviceSettingCallback(data){
            console.log(data);
            // this.serviceTable.tableData[data.currentIndex].serviceMultiple = { //重置服务倍数数据
            //     count:data.serviceMultiple.count,time:data.serviceMultiple.time
            // };
            this.serviceTable.tableData[data.currentIndex].serviceMode = { //重置服务内容数据
                type:data.serviceMode.type,
                count:data.serviceMode.count,time:data.serviceMode.time
            };
            let value = "";
            if(data.serviceMode.type == '1' ){ //数量
                value = "数量"+data.serviceMode.count+"个";
            }else if(data.serviceMode.type == '2'){//时长
                value = "时长"+data.serviceMode.time+"个月";
            }else if(data.serviceMode.type == '3'){ //数量+时长
                value = "数量"+data.serviceMode.count +"个 " + " 时长"+data.serviceMode.time+"个月";
            }
            this.serviceTable.tableData[data.currentIndex].serviceContent = value; //重置服务内容数据
            data.mallId && (this.serviceTable.tableData[data.currentIndex].mallId = data.mallId);//重置商品ID
        },
        //附加服务表，增加行索引
        setRowClassName({row, column, rowIndex, columnIndex}){
            row.currentIndex = rowIndex; //手动给每个行设置一个索引
        },


        //提交保存
        submit(){
            if(this.isCreate == 'detail'){
                this.closeDialog();
                return;
            }
            if(this.hasProductData && this.serviceTable.tableData.length == 0 ){
                this.$message("增购订单,请选择需要增加的服务!");
                return;
            }
            this.checkFrom( () =>{ //先校验是否都输入了数据
                if(!this.mainProductId){
                    this.$alert("未选择产品信息");
                    return;
                }
                let setConfig = true;
                this.serviceTable.tableData && this.serviceTable.tableData.forEach( item => {
                    if(!item.serviceMode || !item.serviceContent){ //如果某一条没有设置服务方式和内容的话
                        setConfig = false;
                    }
                });
                if(!setConfig){
                    this.$message("请先设置服务内容");
                    return;
                }
                let options = {
                    unitName:this.unitData.unitName,//单位名称
                    unitOrgCode:this.unitData.unitOrgCode, //单位产品码
                    unitProductCode:this.unitProductCode, //单位产品编号
                    saleType:this.unitData.orderType,  //订单类型 1正式2试用
                    orderSn:this.unitData.orderSn.toString(), //订单编号
                    orderTime:this.unitData.orderTimeTemp.toString(), //订单时间，时间戳
                    unitId:this.unitData.unitId, //单位ID
                    mainUnitProductName:this.unitData.unitProductName, //单位产品名称 --如果是新购,则必填
                    mainProductId:this.mainProductId, //主产品ID(单位产品编号) --如果是新购,则必填
                    operateType:this.isCreate=="create"?1:2, //1.新建 2.修改
                    corpId:this.unitData.corpId,
                    unitProductType:this.unitData.unitProductType,//新增的单位产品类型
                };
                this.api.saveUserService(
                    options,{loading:true}
                ).then(res =>{
                    console.log(res);
                    this.$message("保存成功!");
                    this.$emit("submit",res);
                    this.closeDialog();
                }).catch( err =>{
                    console.log(err);
                    // this.$alert(err.message);
                });
            });
            
        },

        // 表单校验
        checkFrom(call){
            this.$refs.modifyForm.validate((valid) => {
                if (valid) {
                    call && call();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
           
        },

        // 产品明细表和服务表，的表头分类处理下
        tableHeadFormat(type){
            if(type == "create" || type == "modify" ){ //添加或删除
                this.productTable.headData=[  //产品明细表
                    {
                        title:"serviceType",
                        text:"服务类型"
                    },{
                        title:"serviceName",
                        text:"服务名称"
                    },{
                        title:"mallId", 
                        text:"商品ID"
                    },{
                        title:"serviceMode", 
                        text:"服务方式"
                    },{
                        title:"serviceContent",
                        text:"服务内容"
                    }
                ]; 
                this.serviceTable.headData=[ //附加服务表
                    ...this.productTable.headData,
                    {
                        title:"operation",
                        text:"操作"
                    }
                ]; 
            }
            if(type == "detail"){ //订单详情
                let options = [
                    {
                        title:"serviceType",
                        text:"服务类型"
                    },{
                        title:"serviceName",
                        text:"服务名称"
                    },{
                        title:"mallId", 
                        text:"商品ID"
                    },{
                        title:"serviceMode", 
                        text:"服务方式"
                    },{
                        title:"serviceContent",
                        text:"服务内容"
                    },{
                        title:"serviceStatus",
                        text:"状态"
                    },{
                        title:"beginDate",
                        text:"生效时间"
                    },{
                        title:"expireDate",
                        text:"失效时间"
                    }
                ];
                this.productTable.headData = options;
                this.serviceTable.headData = options;
                
            }
        },
        // 表格数据进行一次格式处理
        tableDataFormat(item){
            let parameter = item.parameter;
            let obj = {
                serviceMode:"",
                serviceContent:"",
            }
            if(parameter.serviceMode){
                obj.serviceMode = {
                    type:parameter.serviceMode.type,
                    count:parameter.serviceMode.count,
                    time:parameter.serviceMode.time
                }
            }
            if(parameter.serviceContent && (parameter.serviceContent instanceof Object)){
                obj.serviceContent = {
                    count:parameter.serviceContent.count,
                    time:parameter.serviceContent.time
                }
            }else{
                obj.serviceContent = parameter.serviceContent;
            }
            return obj;
        },
        //获得当前产品明细表行数据
        getProductCurrentRow(val){
            this.productTable.currentRow = val;
        },
        // 单选
        selectRowProduct(row) {
            if(row.modify){
                this.removeServiceBtn = true;
            }else{
                this.removeServiceBtn = false;
            }
            let markRowSelect = this.serviceTable.markRowSelect;
            this.$refs.serviceTable.clearSelection();
            if ( markRowSelect && markRowSelect.id === row.id ) {
                markRowSelect = {};
                this.$refs.serviceTable.setCurrentRow();
            } else {
                markRowSelect = row;
                this.$refs.serviceTable.setCurrentRow(row);
                this.$refs.serviceTable.toggleRowSelection(row);
            }
        },
        // 选中变化
        getCurrentRow(row) {
            this.serviceTable.currentRow = row[0];
        },
        //手动设置一下表格列宽
        columnWidth(column){
            let width = 50;
            switch (column.title){
                case "mallId":
                    width = 60;break;
                default :
                    width ="auto";break;
            }
            return width;
        },
        closeDialog(){
            this.$refs.modifyForm.resetFields(); //重置
            this.isShopping = false;
            this.hasProductData = false;
            this.productContent.productName = ""; //当前产品包
            this.productTable.tableData = []; //产品包明细表
            this.serviceTable.tableData = []; //附加服务表
            this.mainProductId = "";//主产品ID
            this.unitProductCode = "";
            this.isShow = false;

        },
        formatNumber (n){
            n = n.toString()
            return n[1] ? n : '0' + n
        },
        // 时间格式化
        formatTime(date){
            if(!date)return;
            date = new Date(JSON.parse(date));
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds();
            return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
        }
    }

    

}



</script>

<style lang="scss" scoped>

.modifyDialog{
    .title{
        color: #324558;
        font-weight: 600;
    }
    .el-divider--horizontal{
        margin: 10px 0;
    }
    .leftContent{
        padding: 12px 14px 12px 20px;
    }
    .rightContent{
        background-color: #EDF0F6;
        padding: 12px 14px 12px 10px;
    }
    .selectTanantBtn{
        color: #768592;
    }
    .viewDetail{
        text-decoration: underline;
        color: #0F6CD8;
        &.modify{
            color: #ccc;
        }
    }
    .select_text,.delete_text{
        color: #0F6CD8; 
        font-size: 12px;
        margin-left: 24px;
    }
    .select_text.disabled,.delete_text.disabled{
        color: #ccc!important;
    }
    .delete_text{
        padding-right: 12px;
    }
    .el-dialog{
        // width:380px;
        .el-dialog__body{
            .el-form-item{
                margin-bottom:5px;
                &.bottom0{
                  margin-bottom:3px;  
                }
            }
        }
    }
    .el-input,.el-textarea{
        width:100%;
        font-size: 12px;
        .el-textarea__inner{
            min-height: 50px;
        }
    }
    .el-select{
        // width:228px;
        font-size: 12px;
    }
    .el-select>.el-input{
        width:100%!important;
        font-size: 12px;
    }
    .el-button.is-disabled{
        color: #C0C4CC!important;
        border-color: #EBEEF5!important;
    }

    





}

</style>

<style lang="scss">

.modifyDialog{
    .el-dialog__body{
        padding: 0!important;
    }
    .serviceTable{
        margin-top: 5px;
    }
    .productInfoTable,.serviceTable{
        .el-table__body, .el-table__footer, .el-table__header{
            font-size: 12px;
            .el-table__row td{
                padding:5px 0;
            }
        }
        .el-table th, .el-table tr.header-row{
            height:37px;
            background-color: #F5F7FA!important;
            color:#324558;
            font-size:12px;
            padding:0;
            th.is-leaf{
                padding:0;
            }
        }

    }
    .el-form--label-left .el-form-item__label{
        font-size: 12px;
    }
    .el-form-item__content{
        // line-height: 40px;
        text-align: right;
    }
}
.disabledCheckbox{
    .el-table{
        .el-table__header-wrapper{
            .el-checkbox{
                display: none;
            }
        }
    }
}

</style>

